<template>
  <div class="fix-detail full-height bg-white page-content content message-set">
    <collapse ref="collapse">
      <template v-slot:content>
        <yz-condition-filter
          v-model="queryParams"
          @resetSearch="resetSearch"
          @onSubmit="onSubmit"
        >
          <select-tooltip
            v-model="queryParams.label"
            :multiple="false"
            isShowAll
            :options="mesTypeSOptions"
            msg="消息类别"
          ></select-tooltip>
          <select-tooltip
            v-model="queryParams.groupId"
            multiple
            isShowAll
            :options="roleOptions"
            msg="接收角色"
          ></select-tooltip>
          <select-tooltip
            v-model="queryParams.enable"
            :multiple="false"
            :options="statusOptions"
            msg="状态"
          ></select-tooltip>
        </yz-condition-filter>
      </template>
    </collapse>
    <q-table
      :data="tableData"
      :columns="columns"
      row-key="id"
      class="myTable scroll stick-last-col"
      :loading="isTableLoading"
      :pagination="pagination"
      hide-bottom
      separator="cell"
      no-data-label="暂无数据"
      color="primary"
    >
      <template v-slot:body-cell-label="{ row }">
        <q-td>
          {{labelObj[row.label]}}
        </q-td>
      </template>
      <template v-slot:body-cell-rule="{ row }">
        <q-td class="model full-width" v-if="row.rules && row.rules.length > 0">
          <div class="table-row" v-for="(item, index) in row.rules" :key="index" :class="{'border-bottom': index !== row.rules.length - 1}">
            <span>{{row.ruleName['desc']}}</span>
            <span :style="!row.isRule ? 'color:red' : ''">{{item.threshold}}</span>
            <span>{{row.ruleName['unit']}}</span>
          </div>
        </q-td>
        <q-td v-else class="model full-width table-row">--</q-td>
      </template>
      <template v-slot:body-cell-group="{ row }">
        <q-td class="model full-width" v-if="row.rules && row.rules.length > 0">
          <div class="table-row" v-for="(item, index) in row.rules" :key="index" :class="{'border-bottom': index !== row.rules.length - 1}">
            {{ getMsgGroupNames(item.msgGroups) || '--' }}
          </div>
        </q-td>
        <q-td v-else class="model full-width table-row">--</q-td>
      </template>
      <template v-slot:body-cell-enable="{ row }">
        <q-td style="width: 100px">
          <div class="flex items-center" style="width: 100px">
            <div
              class="radio-box"
              :style="{ background: row.enableFlag === redStopBtn ? '#E43434' : '#44EA96' }"
            ></div>
            <div :style="{ color: row.enableFlag === redStopBtn ? '#E43434' : '#44EA96' }">
              {{ row.enableFlag ? '启用': '禁用' }}
            </div>
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-operations="props">
        <q-td class="operations" style="width: 100px">
          <div class="btn-group" style="text-align: center">
            <q-btn
              style="font-size: 18px"
              flat
              round
              dense
              color="primary"
              class="iconfont icontubiao2-97"
              @click="onSetMsg(props.row)"
            >
              <q-tooltip>设置</q-tooltip>
            </q-btn>
            <q-toggle
              v-model="props.row.enable"
              checked-icon="iconfont icontubiao-49"
              unchecked-icon="iconfont icontubiao-48"
              :disable="false"
              color="positive"
              @input="onStatusToggle(props.row, $event)"
            >
            </q-toggle>
          </div>
        </q-td>
      </template>
    </q-table>
    <div style="width: 100%;">
      <pagination
        style="position: relative;padding: 20px 20px"
        v-if="tableData.length"
        v-model="pagination.page"
        :page-size="pagination.rowsPerPage"
        :total="pagination.rowsNumber"
        @changePage="onPageChange"
        @changePageSize="onPageSizeChange"
      >
      </pagination>
    </div>
    <msg-set-dialog
      :show="isShowMsgSetDialog"
      :roleList="roleOptions"
      :setData="setData"
      @close="isShowMsgSetDialog = false;getList()"
    />
  </div>
</template>
<script>
import Collapse from 'src/components/collapse'
import MESSAGELIST, { getMessageList, putMessage } from 'src/boot/factory/msg-list.js'
import Pagination from 'src/components/pagination'
import MsgList from './components/msg-list.js'
import MsgSetDialog from './components/msg-set-dialog'
import _ from 'lodash'
const MSGLIST = new MsgList()
const { statusOptions, columns, redStopBtn, _setItemRule } = MSGLIST
const { getlistRoles, getBusinessListLabel, getBusinessList } = MESSAGELIST
export default {
  name: 'message-set',
  components: {
    Collapse,
    MsgSetDialog,
    Pagination
  },
  data () {
    return {
      queryParams: {
        label: 'all',
        groupId: ['all'],
        enable: 'all'
      },
      pagination: {
        page: 1, // 当前页码
        rowsPerPage: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      mesTypeSOptions: [],
      roleOptions: [],
      statusOptions: [],
      isTableLoading: false,
      tableData: [],
      isShowMsgSetDialog: false,
      redStopBtn: redStopBtn, // 颜色按钮value
      detailData: null, // 示例数据
      setData: null, //  推送设置数据
      labelObj: {}
    }
  },
  computed: {
    columns () {
      return columns
    },
    sendWayObj () {
      const obj = {}
      this.$getEnum(this.Enums.SEND_WAY).forEach(item => {
        obj[item.value] = item.label
      })
      return obj
    }
  },
  mounted () {
    this.setOptions()
    this.getList()
  },
  methods: {
    // 初始化下拉选
    setOptions () {
      this.getRoleList()
      this.getBusinessList() // 获取消息概要枚举
      this.getBusinessListLabel()
      this.statusOptions = statusOptions
    },
    // 重置
    resetSearch () {
      this.queryParams = {
        label: 'all',
        groupId: ['all'],
        enable: 'all'
      }
    },
    // 查询
    onSubmit () {
      this.pagination.page = 1
      this.getList()
    },
    // 设置
    onSetMsg (row) {
      this.setData = row
      this.isShowMsgSetDialog = true
    },
    // 切换状态
    onStatusToggle (row, val) {
      const params = {
        enableFlag: val ? 1 : 0
      }
      putMessage(row.id, params).then(res => {
        this.getList()
        this.$message.success('操作成功')
      }).catch(err => {
        this.getList()
        console.log(err)
      })
    },
    // 切换页码
    onPageChange (val) {
      this.pagination.page = val
      this.getList()
    },
    // 切换每夜显示条数
    onPageSizeChange (val, page) {
      this.pagination.rowsPerPage = val
      page && (this.pagination.page = page)
      this.getList()
    },
    // 获取查询列表
    getList () {
      const params = {
        pageNum: this.pagination.page,
        pageSize: this.pagination.rowsPerPage,
        enableFlag: this.queryParams.enable === 'all' ? null : this.queryParams.enable,
        label: this.queryParams.label === 'all' ? null : this.queryParams.label,
        msgGroupId: this.queryParams.groupId.indexOf('all') > -1 ? null : this.queryParams.groupId
      }
      this.isTableLoading = true
      getMessageList(params).then(res => {
        res.list.map((v, i) => {
          const item = v
          item.enable = v.enableFlag !== this.redStopBtn
          item.index = i + 1
          item.group = v.group || '--'
          item.sendWayName = ''
          item.sendWays.forEach((way, index) => {
            item.sendWayName += this.sendWayObj[way]
            if (index !== item.sendWays.length - 1) item.sendWayName += '、'
          })
          item.ruleName = _setItemRule({
            business: v.business,
            rule: v.rule
          })
        })
        this.tableData = _.cloneDeep(res.list)
        this.pagination.rowsNumber = res.total
        this.isTableLoading = false
      }).catch(err => {
        this.isTableLoading = false
        console.log(err)
      })
    },
    // 获取接受角色
    getRoleList () {
      let member = []
      getlistRoles().then(res => {
        member = res.map(v => {
          const item = v
          item.value = v.id
          item.label = v.name
          return item
        })
        this.roleOptions = [...member]
      }).catch(err => {
        console.log(err)
      })
    },
    //  获取消息类别
    getBusinessListLabel () {
      let member = []
      getBusinessListLabel().then(res => {
        if (!_.isEmpty(res)) {
          const obj = {}
          member = Object.entries(res).map(v => {
            const item = v
            item.value = v[0]
            item.label = v[1]
            obj[item.value] = item.label
            return item
          })
          this.labelObj = obj
        }
        this.mesTypeSOptions = [...member]
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取消息概要枚举
    getBusinessList () {
      getBusinessList().then(res => {
      }).catch(err => {
        console.log(err)
      })
    },
    getMsgGroupNames (group) {
      let name = ''
      group.forEach((item, index) => {
        name += item.name
        if (index !== group.length - 1) name += '、'
      })
      return name
    }
  }
}
</script>
<style lang="scss" scoped>
.message {
}
.radio-box {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
.model{
  padding: 0
}
.table-row{
  padding: 12px 16px;
}
.border-bottom{
  border-bottom: 1px solid #d3d3d3;
}
</style>
